<template>
  <div class="container">
    <div class="box">
      <el-input
        class="inp"
        v-model="searchInfo.value"
        placeholder="Please input"
      />
      <el-date-picker
        class="pic"
        v-model="searchInfo.date"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <!-- 卡片 -->
    <el-card v-show="flag" class="box-card">
      <template #header>
        <div class="card-header">
          <div>
            <el-avatar
              :size="50"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
          </div>
          <div>
            <p>{{ arr.length ? arr[0].name : "" }}</p>
            <p>{{ arr.length ? arr[0].idCard : "" }}</p>
          </div>
          <el-button @click="close" class="button" text>X</el-button>
        </div>
      </template>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          v-for="(item, index) in arr"
          :key="index"
          :name="index + 1 + ''"
        >
          <template #title>
            <p>
              {{ item.startTime.city }} → {{ item.endTime.city }} &nbsp;
              {{ item.car }}
            </p>
          </template>
          <div @click="track(item)">
            {{ item.car }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <div id="container"></div>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, reactive } from "vue";
import { ref } from "vue";
import { getTime } from "@/utils/time";
import axios from "@/utils/axios";

window._AMapSecurityConfig = {
  securityJsCode: "3230e90f2f03337b40cf3b3a4cd3da66",
};

const size = (ref < "default") | "large" | ("small" > "small");
const searchInfo = reactive({
  value: "123456",
  date: "2023-03-30",
});

const flag = ref(false);

const arr = ref([]);

const activeNames = ref(["1"]);
const handleChange = (val) => {
  console.log(val);
};

// 获取路线
const track = (item) => {
  console.log(item);
  initMap(item);
};
// 关闭
const close = () => {
  flag.value = false;
};
// 搜索
const search = () => {
  // console.log(getTime(searchInfo.date))
  axios
    .get("/search", {
      params: {
        ...searchInfo,
        date: getTime(searchInfo.date),
      },
    })
    .then((res) => {
      console.log(res);
      arr.value = res.data;
      flag.value = true;
    });
};

onMounted(() => {
  initMap();
});
const initMap = (item) => {
  AMapLoader.load({
    key: "d7d087c06b1c235fb99f45f3e00ea946", // 申请好的Web端开发者Key，首次调用 load 时必填
    // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Driving", "AMap.Scale", "AMap.ToolBar", "AMap.OverView"], //插件列表
  })
    .then((AMap) => {
      let map = new AMap.Map("container", {
        center: [116.397428, 39.90923],
      });
      // let trafficLayer = new AMap.TileLayer.Traffic({
      //   zIndex: 2,
      // });
      var driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map,
      });

      var startLngLat = item ? item.startTime.options : [116.23, 39.54];
      var endLngLat = item ? item.endTime.options : [113.41, 29.58];

      driving.search(startLngLat, endLngLat, function (status, result) {
        console.log(status, result);
        // 未出错时，result即是对应的路线规划方案
      });

      // 添加路线规划插件
      map.add(driving);

      // 比例尺插件
      map.addControl(new AMap.Scale());
      // 缩放插件
      map.addControl(new AMap.ToolBar());
      // 鹰眼
      map.addControl(new AMap.OverView({ isOpen: true }));
      // 添加的是线路图层
      // map.add(trafficLayer); //添加图层到地图
    })
    .catch((e) => {
      console.log(e);
    });
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  width: 100%;
  height: 100%;
}
.box {
  width: 400px;
  height: 30px;
  background: white;
  border-radius: 10px;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  display: flex;
  justify-content: space-around;
}
.inp {
  width: 100px !important;
  display: inline-block;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 400px;
  position: absolute;
  left: 30px;
  top: 80px;
  z-index: 33;
}
</style>
